<template>
  <div class="columnsSetting">
    <el-row class="mb-2">
      <el-col :span="12">
        <el-checkbox
          v-model="checkAllStatus"
          class="mx-6"
          @change="changeAllCheck"
          >列展示</el-checkbox
        >
      </el-col>
      <el-col :span="12" class="flex items-center justify-end">
        <el-button type="primary" link @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <div :key="dragAreaKey">
      <div class="fixedLeft" v-if="elTreeDataFixedLeft.length > 0">
        <el-divider content-position="left"
          ><span class="info text-xs">固定在左侧</span></el-divider
        >
        <Tree
          ref="mTreeRefLeft"
          :treeData="elTreeDataFixedLeft"
          fixed-type="left"
          @treeDataChange="treeDataChange"
          @fixedTypeChange="fixedTypeChange"
        ></Tree>
      </div>
      <div class="noFixed" v-if="elTreeDataNoFixed.length > 0">
        <el-divider
          class="info text-xs"
          content-position="left"
          v-if="
            elTreeDataFixedLeft.length != 0 || elTreeDataFixedRight.length != 0
          "
          ><span class="info text-xs">不固定</span></el-divider
        >
        <Tree
          ref="mTreeRefCenter"
          :treeData="elTreeDataNoFixed"
          @treeDataChange="treeDataChange"
          @fixedTypeChange="fixedTypeChange"
        ></Tree>
      </div>
      <div class="fixedRight" v-if="elTreeDataFixedRight.length > 0">
        <el-divider class="info text-xs" content-position="left"
          ><span class="info text-xs">固定在右侧</span></el-divider
        >
        <Tree
          ref="mTreeRefRight"
          :treeData="elTreeDataFixedRight"
          fixed-type="right"
          @treeDataChange="treeDataChange"
          @fixedTypeChange="fixedTypeChange"
        ></Tree>
      </div>
    </div>
  </div>
</template>
<script setup lang="tsx">
import {
  ColumnProps,
  _Align,
  _fixedType,
} from "@/components/baseTable/interface/types";
import treeTool from "@/utils/tree";
import Tree from "./tree.vue";
import { isArray } from "@/utils/is";

//继承官方并且扩展
interface TableProProps<T = any> {
  columnTree: any[];
  columnTreeLock: any[];
  initConfigList: any[];
}
const emit = defineEmits(["reDrawColumn", "changeBaseSetting"]);

// ===============================================================================
// = tool
const getElTreeDataFixedTypeData = (type?: _fixedType): ColumnProps[] => {
  if (type === "left") {
    return elTreeData.value.filter((item: any) => item.props.fixed == "left");
  } else if (type === "right") {
    return elTreeData.value.filter((item: any) => item.props.fixed == "right");
  } else {
    return elTreeData.value.filter((item: any) => !item.props.fixed);
  }
};

// ===============================================================================
// = data

const props = withDefaults(defineProps<TableProProps>(), {});
const mTreeRefLeft = ref<any>();
const mTreeRefCenter = ref<any>();
const mTreeRefRight = ref<any>();

const columnTreeFilterData =
  treeTool.filter(
    props.columnTree,
    (item) => item.type.name == "ElTableColumn"
  ) || [];
const columnTreeLockList = treeTool.toList(columnTreeFilterData);

const elTreeData = ref<ColumnProps[]>([...columnTreeFilterData]);
const dragAreaKey = ref(0);
const checkAllStatus = ref(
  columnTreeLockList.length != 0 &&
    columnTreeLockList.length ==
      columnTreeLockList.filter((item) => item.props._isShow).length
);

const elTreeDataFixedLeft = ref<ColumnProps[]>(
  getElTreeDataFixedTypeData("left")
);
const elTreeDataNoFixed = ref<ColumnProps[]>(getElTreeDataFixedTypeData());

const elTreeDataFixedRight = ref<ColumnProps[]>(
  getElTreeDataFixedTypeData("right")
);

// ===============================================================================
// = methods

const changeAllCheck = (value: any) => {
  if (value) {
    mTreeRefLeft.value?.checkAllTrue();
    mTreeRefCenter.value?.checkAllTrue();
    mTreeRefRight.value?.checkAllTrue();
  } else {
    mTreeRefLeft.value?.checkAllFalse();
    mTreeRefCenter.value?.checkAllFalse();
    mTreeRefRight.value?.checkAllFalse();
  }
  treeDataChange();
};

//fixedType发生改变的事件
const fixedTypeChange = (nodeData: ColumnProps, target?: _fixedType) => {
  treeTool.forEach(elTreeData.value, (item: any) => {
    if (item.id == nodeData.id) {
      item.props.fixed = target;
    }
  });
  elTreeDataFixedLeft.value = elTreeData.value.filter(
    (item: any) => item.props.fixed == "left"
  );
  elTreeDataNoFixed.value = elTreeData.value.filter(
    (item: any) => !item.props.fixed
  );
  elTreeDataFixedRight.value = elTreeData.value.filter(
    (item: any) => item.props.fixed == "right"
  );
  dragAreaKey.value++;
  setTimeout(() => {
    treeDataChange();
  }, 100);
};

//更新当前的elTreeData
const updateNowTreeData = () => {
  const newData = [
    ...(mTreeRefLeft.value?.getTreeData() || []),
    ...(mTreeRefCenter.value?.getTreeData() || []),
    ...(mTreeRefRight.value?.getTreeData() || []),
  ];

  elTreeData.value = newData;
};

/**
 * 当某个类型里面的数据发生变化的时候 触发此事件
 */
const treeDataChange = () => {
  updateNowTreeData();
  changeColumns();

  checkAllStatus.value =
    elTreeData.value.length != 0 &&
    elTreeData.value.length ==
      elTreeData.value.filter((item: any) => item.props._isShow).length;
};

const changeColumns = () => {
  const getReDrawColumnData = (data: any[]): any[] => {
    return data.map((item) => {
      const columnTreeItem = treeTool.findNode(props.columnTree, (item1) => {
        return item1.id == item.id;
      });
      columnTreeItem.props = item.props;

      if (
        (!item.children ||
          (isArray(item.children) && item.children.length == 0)) &&
        columnTreeItem.children &&
        columnTreeItem.children.length > 0
      ) {
        columnTreeItem.children = columnTreeItem.children;
      } else {
        columnTreeItem.children =
          item.children && getReDrawColumnData(item.children);
      }

      return columnTreeItem;
    });
  };
  const res = getReDrawColumnData(elTreeData.value);
  emit("reDrawColumn", res);
};

const reset = () => {
  elTreeData.value =
    treeTool.filter(
      props.columnTreeLock,
      (item) => item.type.name == "ElTableColumn"
    ) || [];

  treeTool.forEach(elTreeData.value, (item) => {
    props.initConfigList.forEach((item1) => {
      if (item1.props.prop == item.id) {
        item.props = {
          ...item1.props,
        };
      }
    });
  });

  elTreeDataFixedLeft.value = getElTreeDataFixedTypeData("left");
  elTreeDataNoFixed.value = getElTreeDataFixedTypeData();
  elTreeDataFixedRight.value = getElTreeDataFixedTypeData("right");
  checkAllStatus.value = true;
  dragAreaKey.value++;

  changeColumns();
};
</script>

<style scoped lang="scss">
.item {
  background-color: #eee;
}
.flip-list-move {
  transition: transform 0.5s;
}

.info {
  color: rgba(0, 0, 0, 0.45);
}
.no-move {
  transition: transform 0s;
}
</style>
